<template>
    <div class="section_common">
        <div class="select_nav">
            <div :class="showTab == 'app' ? 'active' : ''" @click="showTab='app'">
                我审批的
            </div>
            <div :class="showTab == 'sub' ? 'active' : ''" @click="showTab='sub'">
                已提交
            </div>
        </div>
        <approve-area v-if="showTab=='app'"></approve-area>
        <submit-area v-else></submit-area>
    </div>
</template>

<script>
    import ApproveArea from "./approve";
    import SubmitArea from "./submit";
    export  default {
        components:{
            ApproveArea,SubmitArea
        },
        data(){
            return{
                showTab:'app'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .select_nav {
        margin: 0 auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin-top: 10px;
        color: #999;
        
        
        & > div {
            cursor: pointer;
            position: relative;
            padding: 6px 30px;
            border: 1px solid #4f58a8 ;
            &.active {
                background-color: #4f58a8;
                color:white;
            }
            &:first-child{
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
            &:nth-child(2){
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }
        }
    }
</style>
